<template>
  <div>
    <el-tabs @tab-click="handleClick">
      <el-tab-pane label="应用评论">
        <el-table :data="list" style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline>
                <el-form-item label="评论内容：">
                  <span>{{ props.row.discuss_text }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            label="评论信息id"
            prop="discuss_record_id"
            align="center"
          ></el-table-column>
          <el-table-column align="center" label="权限" prop="discuss_power">
            <template slot-scope="scope">
              <span v-if="scope.row.discuss_power === 0">所有人可见</span>
              <span v-if="scope.row.discuss_power === 1">仅自己可见</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="点赞数"
            prop="discuss_likes"
          ></el-table-column>
          <el-table-column label="状态" prop="discuss_state">
            <template slot-scope="scope">
              <span v-if="scope.row.discuss_state === 0">可读</span>
              <span v-if="scope.row.discuss_state === 1">不可读</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="operate" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="success"
                @click="handleClose(scope.$index, scope.row)"
                >修改</el-button
              >
              <el-button size="mini" type="success">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="数码评论">
        <el-table :data="list" style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline>
                <el-form-item label="评论内容：">
                  <span>{{ props.row.discuss_text }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            label="评论信息id"
            prop="discuss_record_id"
            align="center"
          ></el-table-column>
          <el-table-column align="center" label="权限" prop="discuss_power">
            <template slot-scope="scope">
              <span v-if="scope.row.discuss_power === 0">所有人可见</span>
              <span v-if="scope.row.discuss_power === 1">仅自己可见</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="点赞数"
            prop="discuss_likes"
          ></el-table-column>
          <el-table-column label="状态" prop="discuss_state">
            <template slot-scope="scope">
              <span v-if="scope.row.discuss_state === 0">可读</span>
              <span v-if="scope.row.discuss_state === 1">不可读</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="operate" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="success"
                @click="handleClose(scope.$index, scope.row)"
                >修改</el-button
              >
              <el-button size="mini" type="success">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      class="dialog"
      title="修改信息"
      :visible.sync="dialogVisible"
      :show-close="false"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item prop="radio" label="状态">
          <el-radio-group v-model="ruleForm.radio">
            <el-radio :label="0">可读</el-radio>
            <el-radio :label="1">不可读</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="escButton()">取消</el-button>
        <el-button @click="changeUser()" type="primary">修改</el-button>
      </div>
    </el-dialog>
    <!-- 分页器 -->
    <el-pagination
      @current-change="changePage"
      v-show="shows"
      :current-page.sync="currentPage"
      :page-size="pageSize"
      background
      layout="prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>
<script>
import http from '../api/index';
export default {
  data() {
    return {
      list: [],
      dialogVisible: false,
      currentPage: 1,
      pageSize: 20,
      shows: true,
      total: 0,
      discuss_type: 0,
      discuss_record_id: 0,
      ruleForm: {
        radio: '',
      },
      rules: {
        radio: [{ required: true, message: '请选择状态', trigger: 'blur' }],
      },
    };
  },
  mounted() {
    http
      .getCommend({
        discuss_type: 0,
        pages: 1,
      })
      .then((r) => {
        console.log(r);
        this.list = r.data;
        this.total = parseInt(r.msg);
      });
  },
  methods: {
    // 分页
    changePage(val) {
      this.currentPage = val;
      http
        .getCommend({
          discuss_type: parseInt(this.discuss_type),
          pages: 1,
        })
        .then((r) => {
          console.log(r);
          this.list = r.data;
          this.total = parseInt(r.msg);
        });
    },
    // 修改
    handleClose(index, row) {
      console.log(row);
      this.ruleForm.radio = row.discuss_state;
      this.discuss_record_id = row.discuss_record_id;
      console.log(this.discuss_record_id);
      this.dialogVisible = true;
    },
    // 修改用户权限成功
    changeUser() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          http
            .changeStatus({
              discuss_record_id: this.discuss_record_id,
              discuss_state: this.ruleForm.radio,
            })
            .then((r) => {
              console.log(r);
              http
                .getCommend({
                  discuss_type: parseInt(this.discuss_type),
                  pages: this.currentPage,
                })
                .then((r) => {
                  console.log(r);
                  this.list = r.data;
                  this.total = parseInt(r.msg);
                });
            });
          this.dialogVisible = false;
        }
      });
    },
    escButton() {
      this.$refs.ruleForm.resetFields();
      this.dialogVisible = false;
    },

    handleClick(tab, e) {
      this.discuss_type = tab.index;
      console.log(parseInt(this.discuss_type));
      console.log(tab.index);
      http
        .getCommend({
          discuss_type: parseInt(tab.index),
          pages: 1,
        })
        .then((r) => {
          console.log(r);
          this.list = r.data;
          this.total = parseInt(r.msg);
        });
    },
  },
};
</script>
<style scoped>
.card {
  margin-left: 0px;
}
.com {
  color: #cccccc;
}
</style>